<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="container">abcdefghijklmn</div>
    <script>
        // 一、通过js 把container 里的文字 通过span标签包裹起来；
        var containerEle = document.querySelector(".container");
        var str = containerEle.innerText;
        // 包装对象 ： 字符串  数字  布尔值 symbol  bigInt
        // 非包装对象： undefined  null
        // console.log(new String(str));
        //    console.dir(str);
        //    console.log([]);
         containerEle.innerHTML = "";
        for(var i=0;i<str.length;i++){
            var spanEle = document.createElement("span");
            spanEle.innerHTML = str[i];
            containerEle.appendChild(spanEle);
        }

        // var str = "abcdefg";
        // var arr = ["a","b","c","d"];
        // // console.log(str[2]);
        // arr[2] = "k";
        // console.log(arr);
      
        // 二、监听键盘事件 如果 按的按键 和 页面里的字符一样 那么 字符改变样式；
        // 1.不按照顺序按键 样式改变  2.必须按照 字符顺序来按键才会显示；
        var spans = document.querySelectorAll(".container span");
        var num = 0;
        document.onkeydown = function(e){
            var key = e.key;
            // spans.forEach(function(span){
            //     if(key==span.innerHTML){
            //         span.style.color = "red";
            //     }
            // })
            
            if(key==spans[num].innerHTML){
                spans[num].style.color = "red";
                num++;
            }
        }
      

    </script>
</body>
</html>